<?php require_once(dirname(__FILE__).'/../../include/config.inc.php');

?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>中泓高科综合管理系统 数据大屏</title>
	<link rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
  <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=IYNBZ-YNYWG-IE6QE-IQPNJ-J3HKV-BVBTX"></script>
  <style>
   body{ max-height:1080px !important; overflow:hidden !important;}
 </style>
</head>
<body>
  <audio id="audio" src="/tz.mp3" preload="auto" style="display:none;"></audio>
	<header>
		深圳捷达 综合管理系统 数据统计
		<span id=localtime style=" font-size:14px; position: absolute; right: 30px; top:-20px; "></span>
	</header>
	<div id="content">
		<div class="content_left">
			<div class="dtuplc">
				<div class="current-num">
					<div>系统任务数量</div>
					<p> {{ datas.count.all }}</p>
				</div>
			</div>
      <div class="online">
       <div class="title"><img src="images/icon01.png" width="28" /> 服务设备类型</div>
       <div class="online_con" id="container2">
       </div>
     </div>
     <div class="industry">
      <div class="title"><img src="images/star.png"  /> 本月服务之星</div>
       <div class="industry_con" id="guzhang">
        <table class="panel-table"bordercolor="#0d48e0" border="1">
         <tbody>
          <tr class="aaa" align="center">
            <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">工程师</td>
            <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">结单数量</td>
            <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">积分</td>
          </tr>
          <tr v-for="y in datas.managelist" class="aaa" style="font-size: 16px;" align="center" >
           <td>{{ y.truename }}</td>
           <td>{{ y.cishu }}</td>
           <td>{{ y.fee }}</td>
         </tr>
       </tbody>
     </table>


   </div>
 </div>
</div>
<div class="content_center">
 <div class="center_top">
  <div class="center_top_con" id="distribution_map">
  </div>
</div>
<div class="center_bot">
  <table class="panel-table"bordercolor="#0d48e0" border="1">
   <thead bgcolor="#0e4ae0" align="center" >
    <tr height="40">
     <th colspan="6"><img src="images/icon04.png" /> 报修列表</th>
   </tr>
 </thead>
 <tbody>
  <tr class="aaa" align="center">
   <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">类型</td>
   <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">任务类型</td>
   <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">执行人</td>
   <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">故障</td>
   <td  style="color: #00fcff; font-size: 18px; padding: 5px 0;">进度</td>

 </tr>
 <tr v-for="y in datas.order" class="aaa" style="font-size: 16px;" align="center" >
   <td>{{ y.area }}</td>
   <td>{{ y.renwu }}</td>
   <td>{{ y.truename }}</td>
   <td>{{ y.content }}</td>
   <td>{{ y.jindu }}</td>
  
 </tr>
</tbody>
</table>
</div>
</div>
<div class="content_right">
 <div class="report">
  <div class="report1">
   <p>等待受理</p>
   <small> {{ datas.count.waiting }}条</small>
 </div>
 <div class="report2">
   <p style="color:green">受理中</p>
   <small> {{ datas.count.doing }} 条</small>
 </div>
</div>
<div class="news_report">
  <div class="title"><img src="images/icon05.png" /> 今日完修率</div>
  <div class="news_list" id="wanchenglv">

  </div>
</div>
<div class="data_box">
  <div class="title"><img src="images/icon06.png" /> 每日任务次数</div>
  <div class="data_con" id="jilu">
  </div>
</div>
</div>
</div>
<!--遮罩层-->


<!-- Morris Charts CSS -->
<link href="../ui/css/plugins/morris.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.min.js"></script>		
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/china.js"></script>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/times.js"></script>
<!-- Morris Charts JavaScript --> 
<script src="../ui/js/plugins/morris/raphael.min.js"></script> 
<script src="../ui/js/plugins/morris/morris.min.js"></script>        
<script type="text/javascript" src="../layer/layer.js"></script>
<script type="text/javascript">
var audio = $("#audio")[0]; 
var time = 0;
$(document).ready(function(){
  settime();
});
function settime(){
  if(time == 10){
    notice();
    time = 0;
    settime();
  }else{
    setTimeout(function(){time++;settime();},1000);
  }
}

function notice(){
  $.ajax({
    type:'post',
    url:"/getOrder.php",
    dataType:'json',
    data:{},
    success:function(json){
    //alert(json);
    if(json.success == 1){
      notice_window();
    }
    //console.log(json);
    },
    error:function(){
    }
  });
}
function notice_window(){
  $('#notice').click();audio.play();setTimeout(function(){$('#notice').click();},10000);
}



  $(function() {
    //初始化地图
    center = new qq.maps.LatLng(32.976950,114.037510);
    map = new qq.maps.Map(document.getElementById("distribution_map"), {
      center: center,
      zoom: 13,
    });
    markersArray =[]
  })

  var vm = new Vue({
    el: '#content',
    data: {
     datas:{
      count:{all:0,doing:5,waiting:0,working:99},
      order:[],
      map:[]
    },
    timer: null
  },
  methods: {
    setTimer: function () {
      console.log('开始定时...111')
      if(this.timer == null) {
       this.timer = setInterval( () => {
        console.log('开始定时...每过3秒执行一次')
        $.ajax({
         type: 'POST',
         url: "data2.php",
         data:{time:Date.parse(new Date())},
         dataType: 'JSON',
         success: function (result) {
          console.log(result);
          if (result.errno == 0) {
           vm.datas=result.data;
           console.log(vm.datas);
           vm.$forceUpdate();
           getData();
         }
       }
     })
      }, 3000)
     }
   }
 },
 created: function() {
  console.log('开始定时...000');
				            //this.getFamilyBase_info()
				            // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器
				            clearInterval(this.timer)
				            this.timer = null
				            this.setTimer()
                  },
                  destroyed: function () {
				            // 每次离开当前界面时，清除定时器
				            clearInterval(this.timer)
				            this.timer = null
                  }

                })




//工单查看
function showgongdan(id){
	//iframe窗
	layer.open({
	  skin: 'layui-layer-molv', //样式类名
	  type: 2,
	  title: '工单详情',
	  shadeClose: true,
	  shade: false,
      //maxmin: true, //开启最大化最小化按钮
      area: ['893px', '600px'],
     content: ['../ordershow2.php?id='+id], //iframe的url，no代表不显示滚动条

   });
}

//加载数据
function getData(){	
	/*map*/
  if (markersArray) {
    for (i in markersArray) {
      markersArray[i].setMap(null);
    }
  }
  var anchor = new qq.maps.Point(6, 6),
  size = new qq.maps.Size(32, 32),
  origin = new qq.maps.Point(0, 0);
  var map_data = vm.datas.map;
  for(var i = 0; i < map_data.length; i++) {
    var data_pos=map_data[i].latlngs;
    var latLng = eval(new qq.maps.LatLng(map_data[i].lat,map_data[i].lng));
      //var latLng = new LatLng(33.006170,114.015880);
      var marker = new qq.maps.Marker({
        position: latLng,
        map: map,
        icon: new qq.maps.MarkerImage('img/'+map_data[i].jindu+'.gif', size, origin, anchor)
      });
      markersArray.push(marker);
    }
    /*map*/

    /* type */
    var dom = document.getElementById("container2");
    var myChart = echarts.init(dom);
    var app = {};
    option = null;
    option = {

     calculable : true,
     series : [
     {
      name:'访问来源',
      type:'pie',
      radius : '75%',
      center: ['50%', '50%'],
      data: function() {
       var serie = [];
       for(var i = 0; i < vm.datas.order_type.length; i++) {
        var item = {
         name: vm.datas.order_type[i].typename,
         value: vm.datas.order_type[i].cnt
       };
       serie.push(item);
     }
     return serie;
   }()
 }
 ]
};
if (option && typeof option === "object") {
 myChart.setOption(option, true);
}

/*完成率*/	
var wanchenglv = document.getElementById('wanchenglv');
var myChart = echarts.init(wanchenglv);

option = {
 tooltip : {
  formatter: "{a} <br/>{b} : {c}%"
},
series : [
{
  name:'业务指标',
  type:'gauge',
  startAngle: 180,
  endAngle: 0,
			            center : ['50%', '90%'],    // 默认全局居中
			            radius : 180,
			            axisLine: {            // 坐标轴线
			                lineStyle: {       // 属性lineStyle控制线条样式
			                	width: 100
			                }
                   },
			            axisTick: {            // 坐标轴小标记
			                splitNumber: 10,   // 每份split细分多少段
			                length :12,        // 属性length控制线长
                   },
			            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
			            	formatter: function(v){
			            		switch (v+''){
			            			case '60': return '低';
			            			case '80': return '中';
			            			case '90': return '高';
			            			default: return '';
			            		}
			            	},
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                	color: '#fff',
			                	fontSize: 15,
			                	fontWeight: 'bolder'
			                }
                   },
                   pointer: {
                    width:10,
                    length: '90%',
                    color: 'rgba(255, 255, 255, 0.8)'
                  },
                  title : {
                    show : true,
			                offsetCenter: [0, '-60%'],       // x, y，单位px
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                	color: '#fff',
			                	fontSize: 30
			                }
                   },
                   detail : {
                    show : true,
                    backgroundColor: 'rgba(0,0,0,0)',
                    borderWidth: 0,
                    borderColor: '#ccc',
                    width: 100,
                    height: 40,
			                offsetCenter: [0, -40],       // x, y，单位px
			                formatter:'{value}%',
			                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
			                	fontSize : 50
			                }
                   },
                   data:[{value: vm.datas.wanchenglv, name: '完成率'}]
                 }
                 ]
               };

               myChart.setOption(option, true);
             }

//加载报修次数
$(function(){



	Morris.Area({
  // ID of the element in which to draw the chart.
  element: 'jilu',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [
  <?php 
			// 近30天 报表 
  $sql5="SELECT FROM_UNIXTIME(`post_time` ,'%Y-%m-%d' ) as a,count(id) as b FROM `#@__order`  WHERE (TO_DAYS( NOW( ) ) - TO_DAYS( FROM_UNIXTIME( `post_time` ,  '%Y%m%d' )) <=10) group by a asc LIMIT 0 , 30"; 
			 $dosql->Execute("$sql5",9);  //每天用户列表 
			 while($result=$dosql->GetArray(9)){
			 	$d=$result['a'];
			 	echo "{ d: '".$d."',visits:".$result['b']."},";
			 }
			 ?> 

			 ],
  // The name of the data record attribute that contains x-visitss.
  xkey: 'd',
  // A list of names of data record attributes that contain y-visitss.
  ykeys: ['visits'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['提交次数'],
  // Disables line smoothing
  smooth: false,
});


})

</script>

</body>
</html>
